<template>
  <div>
    <van-nav-bar left-text="确认订单" left-arrow />
    <!-- 地址信息 -->
    <div class="daddress">
      <div class="dimg">
        <img
          src="https://img2.baidu.com/it/u=1846569970,2878539289&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1715965200&t=b81fe94e7e0ad62613ae8cd326f5c9cd"
          alt="" />
      </div>

      <div class="dinfo">
        <p class="p1">浙江省杭州市余杭区</p>
        <p class="p2">蒋先生 138****6480</p>
      </div>
      <van-icon name="arrow" />
    </div>
    <!-- 商品信息 -->
    <div class="proinfo">
      <div class="protitle">
        <van-icon name="wap-home" />
        <span>国潮小店</span>
      </div>
      <div class="proitem" v-for="item in list" :key="item._id">
        <div class="itemimg">
          <img :src="item.Iurl" alt="" />
        </div>
        <div class="iteminfo">
          <p>{{ item.name }}</p>
        </div>
        <div class="itemprice">
          <p class="p1">￥{{ item.newprice }}</p>
          <p class="p2">已降{{ item.price - item.newprice }}元</p>
          <p class="p3">x{{ item.num }}</p>
        </div>
      </div>
      <div class="pros">
        <span style="font-size: 14px">配送服务</span>
        <div class="pross">
          <div style="margin-right: 10px">
            <p style="font-size: 14px">今天下单预计26号送达</p>
            <p style="color: rgba(179, 179, 179, 1); font-size: 12px">
              现在下单
            </p>
          </div>
          <van-icon name="arrow" />
        </div>
      </div>
      <div class="pros">
        <span style="font-size: 14px">开具发票</span>
        <div class="pross">
          <div style="margin-right: 10px">
            <p style="color: rgba(179, 179, 179, 1); font-size: 12px">
              暂不支持开票
            </p>
          </div>
          <van-icon name="arrow" />
        </div>
      </div>
      <div class="pros">
        <span style="font-size: 14px">订单备注</span>
        <div class="pross">
          <div style="margin-right: 10px">
            <p style="color: rgba(179, 179, 179, 1); font-size: 12px">无</p>
          </div>
          <van-icon name="arrow" />
        </div>
      </div>
    </div>
    <div class="rmpro">
      <div class="rmtitle">
        <img
          src="https://img1.baidu.com/it/u=2383058063,2543362219&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1715965200&t=5cb78275738ed068541de17f4f127701"
          alt="" />
        <span>热门商品 顺手购买</span>
      </div>
      <div class="protitle">
        <van-icon name="wap-home" />
        <span>汉雅风华</span>
      </div>
      <div class="proitem1">
        <van-checkbox v-model="checked"></van-checkbox>
        <div class="itemimg">
          <img src="../../assets/1.png" alt="" style="width: 50px; height: 50px" />
        </div>
        <div class="iteminfo">
          <span style="color: rgba(250, 120, 143, 1); font-size: 10px">特价</span>
          <span style="font-size: 12px; margin-left: 10px">国潮新款长裙，汉服套装，新款特价</span>
        </div>
        <div class="itemprice">
          <p style="font-size: 12px; font-weight: 500">￥169.00</p>
        </div>
      </div>
    </div>
    <div class="accountbox">
      <p>结算方式</p>
      <div class="accitem">
        <div class="item">
          <img
            src="https://ts1.cn.mm.bing.net/th/id/R-C.7c8120b45870b652be6eace3729a4377?rik=W5pLJvwc1KyTtg&riu=http%3a%2f%2fwww.kuaipng.com%2fUploads%2fpic%2fw%2f2020%2f12-27%2f96087%2fwater_96087_698_698_.png&ehk=KV3OMrRY46JL1w7mkC%2bu5F8tycKr%2bDDRItWMY0D0tkY%3d&risl=&pid=ImgRaw&r=0"
            class="item_img" alt="" />
          <span>以太币支付</span>
        </div>
        <van-radio-group shape="dot">
          <van-radio name="1"></van-radio>
        </van-radio-group>
      </div>
      <div class="accitem">
        <div class="item">
          <img
            src="https://img0.baidu.com/it/u=2981110535,356090043&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1715965200&t=45f13450f6a35b458b1d3bbdafe25aa8"
            class="item_img" alt="" />
          <span>支付宝支付</span>
        </div>
        <van-radio-group shape="dot">
          <van-radio name="3" checked></van-radio>
        </van-radio-group>
      </div>
    </div>
    <div style="height: 100px;">

    </div>
    <div class="bottombox">
      <div class="price">
        <p style="color: rgba(115,115,115,1); font-size: 13px;">共{{ list.length }}件<span
            style="color: #000; margin-left: 5px;">合计：<span style="color:#FF1717;font-size: 18px">{{ getnums()
              }}</span>元</span></p>
      </div>
      <van-button color="#F4DA58" @click="() => {
        router.push('/CartPay')
      }">立即购买</van-button>
    </div>
  </div>
</template>

<script setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import { reactive, ref } from "vue";
import router from '@/router';
let list = reactive(JSON.parse(localStorage.getItem("listc")))
const alerts = () => {
  ElMessageBox.alert('抱歉 目前仅支持以太币支付', '提示', {
    // if you want to disable its autofocus
    // autofocus: false,
    confirmButtonText: '返回',
  })
}
const getnums = () => {
  let num = 0
  list.forEach(item => {
    num += item.price
  })
  return num.toFixed(2)
}
</script>

<style scoped>
.van-nav-bar {
  --van-nav-bar-icon-color: #000;
  --van-nav-bar-text-color: #000;
}

.daddress {
  margin-left: 10px;
  width: 370px;
  height: 60px;
  border-radius: 30px;
  font-size: 14px;
  border: 1px solid rgba(187, 187, 187, 1);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 10px;
  box-sizing: border-box;
}

.daddress .dimg img {
  width: 30px;
  height: 30px;
}

.daddress .dinfo {
  width: 260px;
  line-height: 20px;
}

.daddress .dinfo p {
  font-size: 14px;
}

.daddress .dinfo .p2 {
  color: #a6a6a6;
}

.proinfo {
  width: 390px;
  min-height: 343px;
  line-height: 30px;
  border-radius: 15px;
  font-size: 14px;
  margin-top: 20px;
  padding: 0 15px;
  box-sizing: border-box;
}

.protitle span {
  font-size: 15px;
  margin-left: 5px;
}

.proitem {
  display: flex;
  justify-content: space-around;
  margin-top: 10px;
}

.proitem .itemimg img {
  width: 80px;
  height: 80px;
}

.proitem .itemprice .p1,
.proitem .itemprice .p2,
.proitem .itemprice .p3 {
  width: 58px;
  height: 16px;
  text-align: right;
}

.proitem .iteminfo p,
.proitem .itemprice .p1 {
  font-size: 12px;
}

.proitem .itemprice .p2 {
  color: rgba(236, 135, 147, 1);
  font-size: 11px;
}

.proitem .itemprice .p3 {
  color: rgb(133, 133, 133);
  font-size: 11px;
}

.pros {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
  overflow: hidden;
}

.pross {
  display: flex;
  align-items: center;
}

.rmpro {
  margin-left: 5px;
  width: 380px;
  height: 165px;
  line-height: 30px;
  border-radius: 20px;
  font-size: 14px;
  border: 1px solid rgba(187, 187, 187, 1);
  padding: 10px;
  box-sizing: border-box;
}

.rmtitle img {
  width: 25px;
  height: 25px;
  vertical-align: middle;
}

.rmtitle span {
  font-size: 14px;
  vertical-align: middle;
  margin-left: 5px;
}

.proitem1 {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.proitem1 .itemimg {
  width: 50px;
  height: 50px;
}

.proitem1 .iteminfo {
  width: 200px;
  margin-left: 10px;
}

.accitem {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
  margin-top: 10px;
}

.accitem .item .item_img {
  width: 30px;
  height: 30px;
  vertical-align: middle;
  margin-right: 10px;
}

.accountbox p {
  margin-left: 11px;
  margin-top: 10px;
  width: 65px;
  height: 23px;
  line-height: 23px;
  font-size: 16px;
}

.bottombox {
  width: 390px;
  height: 70px;
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  border: 1px solid rgba(187, 187, 187, 1);
  border-radius: 20px 20px 0px 0px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
  background: white;
}
</style>
